//获取id
const id = location.search.substring(4)

async function getData() {
    const { data: { data: res } } = await axios({
        method: 'GET',
        url: `http://124.223.14.236:3001/api/recipeInfo/${id}`,
    })
    console.log(res)
    document.querySelector('.title-box h3').innerHTML = `${res.title}`
    document.querySelector('.title-box p').innerHTML = `${res.author}`
    document.querySelector('.show-img').src = `http://124.223.14.236:3001/public/${res.img}`
    // console.log(JSON.parse(res.raw_type))
    //渲染主料模块
    if (res.raw_type) {
    document.querySelector('.zhuliao ul').innerHTML = JSON.parse(res.raw_type).map(item => {
        return `
        <li>
        <span class="category_s1">
            <a href="/YuanLiao/ZhongJinMianFen/" target="_blank"><b>${item.name}</b></a>
        </span>
        <span class="category_s2">${item.num}</span>
        </li>
        `
    }).join('')
}
    //渲染辅料模块
    if (res.raw_fu_list) {
    document.querySelector('.fuliao').innerHTML = JSON.parse(res.raw_fu_list).map(item => {
        return `
        <li>
          <span class="category_s1">
                <a href="/YuanLiao/YouPoLaZi/"  target="_blank"><b>${item.name}</b></a>
            </span>
            <span class="category_s2">${item.num}</span>
        </li>
        `
    }).join('')
}
    //渲染调料模块
    if (res.raw_tl_list) {
    document.querySelector('.tiaoliao').innerHTML = JSON.parse(res.raw_tl_list).map(item => {
        return `
        <li>
            <span class="category_s1">
                <b>${item.name}</b>
            </span>
            <span class="category_s2">${item.num}</span>
        </li>
        `
    }).join('')
}
    //渲染最后一个调料模块
    if (res.raw_list) {
    document.querySelector('.kouwei').innerHTML = JSON.parse(res.raw_list).map(item => {
        return `
        <li>
        <span class="category_s1">
            <a href="recipe-type-do-cuisine-view-5.html" target="_blank">${item.name}</a>
        </span>
        <span class="category_s2">${item.num}</span>
        </li>
        `
    }).join('')
}
    //渲染做法步骤
    document.querySelector('.zuofa').innerHTML = `${res.title}的做法步骤`
    // console.log(res.context)
    if (res.context) {
    document.querySelector('.buzhou').innerHTML = `${res.context}`}
}
getData()